  import "./index.css"
  export default {
    props: ["element", "data", "index"],
    // eslint-disable-next-line no-unused-vars
    render (h) {
      return (
        this.element ? <div class={"item"} onClick={($event) => this.clickCurrent($event)} component-key={this.element.key} key={this.element.key}>
          {this.drawingComponent}
        </div> : null
      )
    },
    data () {
      return {
        component: this.element.type
      }
    },
    computed: {
      drawingComponent () {
        if (!this.component) { return null }
        const Tag = this.component
        return this.element.key?<Tag element={this.element} data={this.data} index={this.index}></Tag>:null
      },
      store () {
        return this.element.getRoot();
      }
    },
    methods: {

      handleDelete (index) {
        console.log('index', index)
        if (this.data.length - 1 === index) {
          if (index == 0) {
            this.store.current = {}
            this.store.eventCenter.fire('current', {})
          } else {
            this.store.current = this.data[index - 1]
            this.store.eventCenter.fire('current', this.data[index - 1])
          }
        } else {
          this.store.current = this.data[index + 1]
          this.store.eventCenter.fire('current', this.data[index + 1])
        }
        this.store.delComponent(this.data[index]['key'])
        this.$nextTick(() => {
          this.$delete(this.data, index)
        })
      },
      clickCurrent (even) {
        even.stopPropagation();
        this.store.current = this.store.componentsMap[this.element.key]
      }
    }
  }


